<!--
 * @Author: lc
 * @version: v1.2
 * @Date: 2021-10-27 10:28:49
 * @LastEditors: lc
 * @LastEditTime: 2021-10-27 19:36:01
 * @Descripttion: 
-->
<template>
  <div class="table-container">
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <div class="empty" slot="empty">
        <img :src="require('@/assets/nodata.png')" alt />
        <span>没有查询到任何数据</span>
      </div>
      <el-table-column type="selection" width="55" align="center" v-if="securityHides.includes('select')" />
      <template v-for="(column,colIndex) in tableInfo.columns">
        <el-table-column :label="column.label" :key="colIndex" align="center" v-if="column.type==='action'">
          <template>
            <el-button type="text" size="small" v-for="(btnCol,btnIndex) in column.content" :key="btnIndex">{{btnCol}}</el-button>
          </template>
        </el-table-column>
        <el-table-column :prop="column.prop" :label="column.label" :key="colIndex" align="center" v-else />
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'DytTable',
  props: {
    tableInfo: {
      required: true,
      type: Object
    }
  },
  watch: {
    tableInfo: {
      handler(val) {
        console.log('table数据', val)
      },
      immediate: true,
      deep: true
    }
  },
  computed: {
    securityHides() {
      return this.tableInfo.hides || []
    }
  },
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333,
          state: 0
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333,
          state: 1
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333,
          state: 0
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333,
          state: 2
        }
      ]
    }
  },
  methods: {
    /**
     * @author: lc
     * @name:
     * @param {*} val
     * @return {*}
     * @msg: 表格多选事件
     */
    handleSelectionChange(val) {
      console.log('多选', val)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/plugin.scss';

.table-container {
  width: 100%;
  height: 100%;
  .empty {
    // @include verticalCenter;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    img {
      width: 245px;
    }
  }
}
</style>